<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form class="pcc-form" :label-width="100">
          <FormItem label="显示切换按钮">
            <i-switch size="small" v-model="showPrevAndNext"></i-switch>
          </FormItem>
          <FormItem label="开启自动轮播">
            <i-switch size="small" v-model="autoplay"></i-switch>
          </FormItem>
          <FormItem label="轮播时间间隔">
            <InputNumber size="small" :max="100000" :min="1" v-model="autoplayDelay" :active-change="false"></InputNumber> 秒
          </FormItem>
          <FormItem label="切换效果">
            <Select :transfer="true" size="small" v-model="effect">
              <Option v-for="item in effects" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="切换滑动方向">
            <Select :transfer="true" size="small" v-model="direction">
              <Option value="horizontal">水平方向切换</Option>
              <Option value="vertical">垂直方向切换</Option>
            </Select>
          </FormItem>
          <FormItem label="切换速度">
            <InputNumber size="small" :max="100000" :min="100" :step="100" v-model="speed" :active-change="false"></InputNumber> 毫秒
          </FormItem>

          <FormItemPanel title="轮播页面列表">
            <Alert show-icon>请在预览模式下查看效果</Alert>
            <div class="float-right">
              <Button size="small" type="primary" @click="openForm(false)">添加</Button>
              <!--<Button size="small" @click="">从我的工程中选择</Button>-->
            </div>
            <div class="clearfix"></div>
            <div class="m-b-5px"></div>
            <draggable
                :list="pages"
                :disabled="false"
                class="page-list-group"
                ghost-class="ghost">
              <div
                  title="可拖拽调整顺序"
                  class="page-list-group-item"
                  v-for="(page, index) in pages"
                  :key="index">
                <a href="javascript:;" style="color: #fff; margin-right: 15px;" @click="openForm(true, page, index)"><Icon type="md-create" /></a>
                <a href="javascript:;" style="color: #fff;" @click="deletePage(index)"><Icon type="md-trash" /></a>
                <p>{{page.name}}</p>
                <p class="url-p">
                  {{page.url}}
                </p>
              </div>
            </draggable>
          </FormItemPanel>

        </Form>

      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>
<!--          <FormItemPanel title="轮播切换结束时运行脚本">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过activeIndex可获取当前切换到的页面的索引</Alert>
            <CodeEditor v-model="slideChangeTransitionEndCode"></CodeEditor>
          </FormItemPanel>-->
        </Container>
      </TabPane>
    </Tabs>

    <Modal
        v-model="addPageModalVisible"
        title="添加轮播页面信息"
        :mask-closable="true"
        :z-index="999">
      <Form ref="form" :model="formData" :rules="ruleValidate">
        <FormItem label="页面名称" prop="name">
          <Input type="text" v-model="formData.name"/>
        </FormItem>
        <FormItem class="current-form-item" :label-width="0" prop="url">
          <CodeEditor mode="text" v-model="formData.url" placeholder="URL地址，必填，示例：http://xxxx.xxxx.xxxx"></CodeEditor>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="saveForm">保存</Button>
      </div>
    </Modal>

  </div>
</template>

<script>

  import draggable from "vuedraggable";

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'PageCarouselCompForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    components: {
      draggable
    },
    data() {
      return {
        addPageModalVisible: false,

        effects: [
          {
            label: 'slide',
            value: 'slide'
          },
          {
            label: 'fade',
            value: 'fade'
          },
          {
            label: 'coverflow',
            value: 'coverflow'
          },
        ],

        formData: {
          name: '',
          url: ''
        },
        currentEditPageItemIndex: null,
        ruleValidate: {
          name: [
            { required: true, message: '页面名称不能为空', trigger: 'blur' }
          ],
          url: [
            { required: true, message: 'URL不能为空', trigger: 'blur' }
          ]
        },
      }
    },
    mounted() {

    },
    methods: {

      saveForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.currentEditPageItemIndex != null) {
              this.pages[this.currentEditPageItemIndex].name = this.formData.name
              this.pages[this.currentEditPageItemIndex].url = this.formData.url
              this.currentEditPageItemIndex = null
            }else {
              this.pages.push({
                name: this.formData.name,
                url: this.formData.url
              });
            }
            this.$refs.form.resetFields();
            this.addPageModalVisible = !this.addPageModalVisible;
          }
        });
      },

      deletePage (index) {
        this.pages.splice(index, 1)
      },

      openForm (edit, pageItem, editIndex) {
        this.addPageModalVisible = !this.addPageModalVisible
        if (edit) {
          this.currentEditPageItemIndex = editIndex
          this.formData = this.$PnUtil.deepClone(pageItem)
        }else {
          this.currentEditPageItemIndex = null
          this.formData = {name: '', url: ''}
          this.$refs.form.resetFields();
        }
      }

    },
    computed: {
      ...mapFields({

        showPrevAndNext: 'component.compConfigData.showPrevAndNext',
        autoplay: 'component.compConfigData.autoplay',
        autoplayDelay: 'component.compConfigData.autoplayDelay',
        effect: 'component.compConfigData.effect',
        direction: 'component.compConfigData.direction',
        speed: 'component.compConfigData.speed',
        // slideChangeTransitionEndCode: 'component.compConfigData.slideChangeTransitionEndCode',

        pages: 'component.compConfigData.pages',

      })
    }
  }
</script>

<style scoped>
>>> .current-form-item .ivu-form-item-content {
  line-height: inherit !important;
}
>>> .CodeMirror-gutters {
  left: 0px !important;
}
</style>

<style lang="less" scoped>
  .page-list-group {
    border-left: 1px solid #424242;
    border-right: 1px solid #424242;
    border-bottom: 1px solid #424242;
    .page-list-group-item {
      position: relative;
      width: 100%;
      height: auto;
      background-color: #757575;
      color: #fff;
      border-top: 1px solid #424242;
      padding: 10px;
      cursor: move;
      a {
        position: absolute;
        top: 5px;
        right: 5px;
      }
      .url-p {
        word-break: break-all;
        padding: 5px;
        background-color: #424242;
        color: #fff;
        border-radius: 4px;
      }
    }
  }
</style>
